<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/my/my.css">
    <link rel="stylesheet" href="/my/manage.css">

    <title>北京自考社区</title>
    <style>
        .my-cover{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            /* 遮罩层效果，父div透明，子div不透明,使用opacity: 0.3 会导致父子div都透明，不能实现效果
               父div使用background: rgba(0, 0, 0, 0.5); 可以实现父div透明，子div不透明的效果
            */
            /* opacity: 0.3;  */
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1000
        }
        .my-show-div{
            width: 80%;
            margin-top: -400px;
            border: 1px solid #999;
            display: none;
            position: absolute;
            top: 50%;
            left: 10%;
            z-index: 1002;
            background: #fff;
            padding: 8px;
        }
    </style>
</head>


<body>
<!-- header -->
<th:block th:include="common::header"></th:block>

    <!-- main -->
    <div class="layui-container re-layui-container my-main">
        <ul class="layui-nav layui-nav-tree my-nav-tree" lay-filter="test">
            <li id="li-navTree1" class="layui-nav-item">
                <a class="my-title-1" style="font-weight: bold;" href="javascript:;">系统管理</a>
                <dl class="layui-nav-child">
                    <dd id="dd-navTree1-1" onclick="navTab('navTree1-1')"><a href="javascript:;">用户管理</a></dd>
                </dl>
            </li>
            <li id="li-navTree2" class="layui-nav-item">
                <a class="my-title-1" style="font-weight: bold;" href="javascript:;">文章管理</a>
                <dl class="layui-nav-child">
                    <dd id="dd-navTree2-1" onclick="navTab('navTree2-1')"><a href="javascript:;">文章标签</a></dd>
<!--                    <dd onclick="navTab('navTree2-2')"><a href="javascript:;">文章列表</a></dd>-->
                </dl>
            </li>
            <li id="li-navTree3"  class="layui-nav-item">
                <a class="my-title-1" style="font-weight: bold;" href="javascript:;">问答管理</a>
                <dl class="layui-nav-child">
                    <dd id="dd-navTree3-1" onclick="navTab('navTree3-1')"><a href="javascript:;">问答标签</a></dd>
                </dl>
            </li>
        </ul>
        <div class="my-nav-tree-content">
            <div class="my-nav-tree-item my-hide">
                <div id="navTree1-1" style="padding: 12px" class="my-nav-tree-child-item my-hide">
                    <!-- 用户列表 -->
                    <table id="userList" class="re-layui-table"></table>
                </div>
            </div>
            <div class="my-nav-tree-item my-hide">
                <div id="navTree2-1"  style="padding: 12px"  class="my-nav-tree-child-item my-hide">
                    <button type="button" onclick="showCoverForm('navTree2-1')" class="layui-btn">添加标签</button>
                    <!-- 标签列表 -->
                    <table id="articleTagList" class="re-layui-table"></table>
                </div>
                <div id="navTree2-2" style="padding: 12px" class="my-nav-tree-child-item my-hide">
                    <!-- 文章列表 -->
                    <table id="articleList" class="re-layui-table"></table>
                </div>
            </div>
            <div class="my-nav-tree-item my-hide">
                <div id="navTree3-1" class="my-nav-tree-child-item my-hide">
                    <button type="button" onclick="showCoverForm('navTree3-1')" class="layui-btn">添加标签</button>
                    <!-- 标签列表 -->
                    <table id="questionTagList" class="re-layui-table"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <th:block th:include="common::footer"></th:block>

    <!-- 弹窗代码 -->
    <!-- 遮罩层
         遮罩层效果，父div透明，子div不透明
    -->
    <div id="cover" class="my-cover">
        <!-- 弹窗 -->
        <div id="show-div" class="my-show-div">
            <form style="display: none" id="form-navTree1-1" class="layui-form">
                <div class="layui-form-item" pane>
                    <input id="name-navTree1-1" type="text" name="name" required lay-verify="required" placeholder="请输入角色名称" autocomplete="off"
                           class="layui-input">
                </div>

                <div class="layui-form-item" pane>
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="btnCancel('navTree1-1')">取消</button>
                        <button class="layui-btn" onclick="coverFormBtn('navTree1-1')">确定</button>
                    </div>
                </div>
            </form>
            <!-- action="javascript:;" 可以阻止表单提交后自动跳转 -->
            <form style="display: none" action="javascript:;" id="form-addRole-navTree1-1" class="my-form">
                <div class="my-form-item">
                    用户名: <input id="name-addRole-navTree1-1" type="text" class="my-form-input" disabled />
                </div>

                <div class="my-form-item" id="roles-addRole-navTree1-1">

                </div>
                <div class="my-form-item">
                    <button class="layui-btn" onclick="btnCancel('addRole-navTree1-1')">取消</button>
                    <button class="layui-btn" onclick="coverFormBtn('addRole-navTree1-1')">确定</button>
                </div>
            </form>
            <form style="display: none" id="form-navTree2-1" action="javascript:;" class="layui-form">
                <div class="layui-form-item" pane>
                    <input id="name-navTree2-1" type="text" name="name" required lay-verify="required" placeholder="请输入标签名称" autocomplete="off"
                           class="layui-input">
                </div>

                <div class="layui-form-item" pane>
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="btnCancel('navTree2-1')">取消</button>
                        <button class="layui-btn" onclick="coverFormBtn('navTree2-1')">确定</button>
                    </div>
                </div>
            </form>
            <form style="display: none" action="javascript:;" id="form-updateTag-navTree2-1" class="my-form">
                <div class="my-form-item">
                    标签名称: <input id="name-updateTag-navTree2-1" type="text" class="my-form-input" />
                    <input id="tagId-updateTag-navTree2-1" type="text" hidden class="my-form-input" disabled />
                </div>

                <div class="my-form-item">
                    <button class="layui-btn" onclick="btnCancel('updateTag-navTree2-1')">取消</button>
                    <button class="layui-btn" onclick="coverFormBtn('updateTag-navTree2-1')">确定</button>
                </div>
            </form>
            <form style="display: none" id="form-navTree3-1" action="javascript:;" class="layui-form">
                <div class="layui-form-item" pane>
                    <input id="name-navTree3-1" type="text" name="name" required lay-verify="required" placeholder="请输入标签名称" autocomplete="off"
                           class="layui-input">
                </div>

                <div class="layui-form-item" pane>
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="btnCancel('navTree3-1')">取消</button>
                        <button class="layui-btn" onclick="coverFormBtn('navTree3-1')">确定</button>
                    </div>
                </div>
            </form>
            <form style="display: none" action="javascript:;" id="form-updateTag-navTree3-1" class="my-form">
                <div class="my-form-item">
                    标签名称: <input id="name-updateTag-navTree3-1" type="text" class="my-form-input" />
                    <input id="tagId-updateTag-navTree3-1" type="text" hidden class="my-form-input" disabled />
                </div>

                <div class="my-form-item">
                    <button class="layui-btn" onclick="btnCancel('updateTag-navTree3-1')">取消</button>
                    <button class="layui-btn" onclick="coverFormBtn('updateTag-navTree3-1')">确定</button>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="/jquery-3.5.1.js"></script>
<script src="/layui/layui.js"></script>
<script src="/my/my.js"></script>

<script th:inline="javascript">
    var currTab = [[${currTab}]];

    // 声明一个变量，用于保存navTab函数每次的调用参数
    var navTab_preParam = null;
    var row_tr_id = null;

    // 页面初始化
    $(document).ready(function () {
        if (currTab == null) {
            navTab('navTree1-1');
            $("#li-navTree1").addClass("layui-nav-itemed");
            $("#dd-navTree1-1").addClass("layui-this");
        }
    });

    layui.use(['element', 'table'], function () {
        var element = layui.element;
        var table = layui.table;

        // 监听写文章
        $(document).on('click','#writeArticle',function(){
            var user = [[${#httpSession.getAttribute('user')}]];
            if (!user) {
                layer.open({
                    type: 0,
                    content: "请先登录"
                });
            } else {
                window.open('/article/article/writeArticle');
            }
        });
    });

    // navTab：控制树型菜单的切换
    function navTab(param){
        // 1. 清除上次的点击效果
        if(navTab_preParam){
            if(navTab_preParam.search("-") != -1){
                $("#"+navTab_preParam).parent(".my-nav-tree-item").removeClass('layui-show');
            }
            $("#"+navTab_preParam).removeClass('layui-show')
        }

        // 2.处理当次点击
        // 先判断当前传入的param是父菜单还是子菜单
        // 如果是字节点则需要先处理其父节点
        if(param.search("-") != -1){
            $("#"+param).parent(".my-nav-tree-item").addClass('layui-show')
        }
        $("#"+param).addClass('layui-show')

        // 3.保存当次参数
        navTab_preParam = param;

        // 4.加载内容
        loadTabContent(param);
    }

    // 加载TabContent的内容
    function loadTabContent(param) {
        // 加载用户管理的数据
        if ("navTree1-1" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#userList'
                    , url: '/user/user/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    // , url: 'table.json'
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {field: 'id', title: '用户id',width:'10%'},
                            {field: 'name',title: '用户名',width:'10%'},
                            {field: 'age', title: '年龄', width: '10%'},
                            {align:'center',title:'性别',width:'10%',templet:function(d){
                                if (d.gender == 1){
                                    return "男";
                                }else if (d.gender == 0){
                                    return "女";
                                }else{
                                    return "";
                                }
                            }},
                            {field: 'email', title: '邮箱'},
                            {title: '是否管理员', width: 180, templet: function(d){
                                if (d.isAdmin == 1){
                                    return "是";
                                }else{
                                    return "否";
                                }
                            }},
                            {align: 'center', title: '操作', width: 180, templet: function(d){
                                if(d.isAdmin == 1){
                                    return "<a class='layui-btn layui-btn-xs' onclick='user_cancelAdmin(" + d.id +")'>取消管理员</a>";
                                }else{
                                    return "<a class='layui-btn layui-btn-xs' onclick='user_setAdmin(" + d.id +")'>置管理员</a>";
                                }
                            }}
                        ]
                    ]
                });
            });
        }

        // 加载标签的数据
        if ("navTree2-1" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#articleTagList'
                    , url: '/article/tag/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {field: 'id',title: '标签id',width:'10%'},
                            {field: 'name', title: '标签名称'},
                            {align: 'center', title: '操作', width: 180, templet: function(d){
                                    var htmls = '<a class="layui-btn layui-btn-xs" onclick="article_updateTag('+d.id+')">修改标签</a>';
                                    return htmls;
                                }}
                        ]
                    ]
                });

                // layui 二级列表
                table.on('row(roleListFilter)',function(obj){
                    // 得到当前行元素对象
                    var tr = obj.tr;
                    // 获取当前行数据
                    console.log(obj.data);
                    var id = obj.data.id;

                    if (id == null){
                        // 用户在点击二级列表
                        return;
                    }else if(id  && id == row_tr_id){
                        row_tr_id = null;
                        tr.next().remove();
                    }else {
                        row_tr_id = id;
                        $.ajax({
                            url: '/user/permission/listForLayUI',
                            type: 'post',
                            contentType: "application/json;charset=UTF-8",
                            success: function (obj) {
                                var _html = "<tr>"
                                for(var i = 0;i<obj.count;i++){
                                    _html += "<td><div class='layui-table-cell'></div></td>"
                                    _html += "<td><div class='layui-table-cell'>"+obj.data[i].name+"</div></td>"
                                    _html += "<td><div class='layui-table-cell'>"+obj.data[i].url+"</div></td>"
                                    _html += "<td><div class='layui-table-cell'></div></td>"
                                }
                                tr.after(_html);
                            },
                            error: function () {

                            }
                        });
                    }
                });
            });
        }

        // 加载文章列表的数据
        if ("navTree2-2" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#articleList'
                    , url: '/article/article/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {
                                field: 'title',
                                title: '标题',
                                templet: '<div><a href="/article/article/showArticle/{{d.id}}" target="_blank" class="layui-table-link">{{d.title}}</a></div>'
                            },
                            {field: 'authorAndTime', title: '作者', width: '26%'}
                        ]
                    ]
                });

                // layui 二级列表
                table.on('row(roleListFilter)',function(obj){
                    // 得到当前行元素对象
                    var tr = obj.tr;
                    // 获取当前行数据
                    console.log(obj.data);
                    var id = obj.data.id;

                    if (id == null){
                        // 用户在点击二级列表
                        return;
                    }else if(id  && id == row_tr_id){
                        row_tr_id = null;
                        tr.next().remove();
                    }else {
                        row_tr_id = id;
                        $.ajax({
                            url: '/user/permission/listForLayUI',
                            type: 'post',
                            contentType: "application/json;charset=UTF-8",
                            success: function (obj) {
                                var _html = "<tr>"
                                for(var i = 0;i<obj.count;i++){
                                    _html += "<td><div class='layui-table-cell'></div></td>"
                                    _html += "<td><div class='layui-table-cell'>"+obj.data[i].name+"</div></td>"
                                    _html += "<td><div class='layui-table-cell'>"+obj.data[i].url+"</div></td>"
                                    _html += "<td><div class='layui-table-cell'></div></td>"
                                }
                                tr.after(_html);
                            },
                            error: function () {

                            }
                        });
                    }
                });
            });
        }

        // 加载问题标签数据
        if ("navTree3-1" == param){
            layui.use(['element', 'table'], function () {
                var element = layui.element;
                var table = layui.table;

                table.render({
                    elem: '#questionTagList'
                    , url: '/question/tag2/listForLayUI' //数据接口
                    , skin: 'line'
                    , size: 'lg'
                    , page: true               //开启分页
                    , cols: [
                        [                      //表头
                            {field: 'id',title: '标签id',width:'10%'},
                            {field: 'name', title: '标签名称'},
                            {align: 'center', title: '操作', width: 180, templet: function(d){
                                    var htmls = '<a class="layui-btn layui-btn-xs" onclick="question_updateTag('+d.id+')">修改标签</a>';
                                    return htmls;
                                }}
                        ]
                    ]
                });

                // layui 二级列表
                table.on('row(roleListFilter)',function(obj){
                    // 得到当前行元素对象
                    var tr = obj.tr;
                    // 获取当前行数据
                    console.log(obj.data);
                    var id = obj.data.id;

                    if (id == null){
                        // 用户在点击二级列表
                        return;
                    }else if(id  && id == row_tr_id){
                        row_tr_id = null;
                        tr.next().remove();
                    }else {
                        row_tr_id = id;
                        $.ajax({
                            url: '/user/permission/listForLayUI',
                            type: 'post',
                            contentType: "application/json;charset=UTF-8",
                            success: function (obj) {
                                var _html = "<tr>"
                                for(var i = 0;i<obj.count;i++){
                                    _html += "<td><div class='layui-table-cell'></div></td>"
                                    _html += "<td><div class='layui-table-cell'>"+obj.data[i].name+"</div></td>"
                                    _html += "<td><div class='layui-table-cell'>"+obj.data[i].url+"</div></td>"
                                    _html += "<td><div class='layui-table-cell'></div></td>"
                                }
                                tr.after(_html);
                            },
                            error: function () {

                            }
                        });
                    }
                });
            });
        }
    }

    function showCoverForm(param){
        $("#form-"+param).css("display","block");
        showWindow();
    }

    function coverFormBtn(param) {
        if("navTree1-1" == param){
            var name = $("#name-"+param).val();
            $.ajax({
                url: '/user/role/save',
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                success: function (obj) {
                    $("#showQuestion").html("<h1 class='title'>" + obj.question.title + "</h1>")
                        .append(obj.question.content)
                        .append("<ul class='toolbar'><li><a href='#'><i class=\"layui-icon layui-icon-praise\"></i>点赞</a></li><li><a href='#'><i class=\"layui-icon layui-icon-reply-fill\"></i>回答</a></li><li><a href='#'><i class=\"layui-icon layui-icon-star\"></i>收藏</a></li></ul>");
                },
                error: function () {

                }
            });
        }

        if("navTree2-1" == param){
            var name = $("#name-"+param).val();
            var articleTagData = {
                "name":name
            }
            $.ajax({
                url: '/article/tag/save',
                type: 'post',
                async: false,
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(articleTagData),
                success: function (obj) {
                    if (obj.code == 200) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "保存成功"
                            });
                        });
                    } else {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "保存失败" + data.msg
                            });
                        });
                    }
                }
            });
            btnCancel('navTree2-1');
            navTab("navTree2-1");
        }

        if("updateTag-navTree2-1" == param){
            var name = $("#name-"+param).val();
            var tagId = $("#tagId-"+param).val();
            var articleTagData = {
                "name":name,
                "id":tagId
            }
            $.ajax({
                url: '/article/tag/update',
                type: 'post',
                async: false,
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(articleTagData),
                success: function (obj) {
                    if (obj.code == 200) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "标签更新成功"
                            });
                        });
                    }else{
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "标签更新失败"
                            });
                        });
                    }
                }
            });

            btnCancel("updateTag-navTree2-1");

            navTab("navTree2-1");
        }

        if("navTree3-1" == param){
            var name = $("#name-"+param).val();
            var questionTagData = {
                "name":name
            }
            $.ajax({
                url: '/question/tag2/save',
                type: 'post',
                async: false,
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(questionTagData),
                success: function (obj) {
                    if (obj.code == 200) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "保存成功"
                            });
                        });
                    } else {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "保存失败" + data.msg
                            });
                        });
                    }
                }
            });
            btnCancel('navTree3-1');
            navTab("navTree3-1");
        }

        if("updateTag-navTree3-1" == param){
            var name = $("#name-"+param).val();
            var tagId = $("#tagId-"+param).val();
            var questionTagData = {
                "name":name,
                "id":tagId
            }
            $.ajax({
                url: '/question/tag2/update',
                type: 'post',
                async: false,
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(questionTagData),
                success: function (obj) {
                    if (obj.code == 200) {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "标签更新成功"
                            });
                        });
                    }else{
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.open({
                                type: 0,
                                content: "标签更新失败"
                            });
                        });
                    }
                }
            });

            btnCancel("updateTag-navTree3-1");
            navTab("navTree3-1");
        }
    }

    function btnCancel(param){
        $("#form-"+param).css("display","none");
        closeWindow();
    }

    // 弹窗
    function showWindow() {
        // 让遮罩层填满整个滚动屏幕
        var w=document.body.scrollWidth ;
        var h=document.body.scrollHeight;
        // 减去导航条的高度，因为导航条有滚动效果，需要减去一个导航条高度，才合适
        h = h-48;
        // 重新设置遮罩的高度
        $("#cover").css("height",h+"px");

        $('#show-div').show();
        $('#cover').css('display', 'block');
    }

    // 关闭弹窗
    function closeWindow() {
        $('#show-div').hide();
        $('#show-div').css('display', 'none');
        $('#cover').css('display', 'none');
    }

    function user_setAdmin(param) {
        $.ajax({
            url: '/user/user/manage/setAdmin/' + param,
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (obj) {

            }
        });
    }
    function user_cancelAdmin(param) {
        $.ajax({
            url: '/user/user/manage/cancelAdmin/' + param,
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (obj) {

            }
        });
    }
    function role_updatePermission(param) {
        $.ajax({
            url: '/user/rolepermission/updatePermissionPage/' + param,
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (obj) {
                showCoverForm("updatePermission-navTree1-2");
                var _html = '权限: <br>';
                for (var i = 0; i < obj.permissions.length; i++) {
                    _html += ' <input type="checkbox" name="permission" value="' + obj.permissions[i].id + '"';
                    if (obj.permissions[i].isOwn == 1) {
                        _html += ' checked '
                    }
                    _html += ' >' + obj.permissions[i].name + "-" +  obj.permissions[i].url + '<br>';
                }
                $("#permissions-updatePermission-navTree1-2").html(_html);
                $("#name-updatePermission-navTree1-2").val(obj.role.name);
                $("#roleId-updatePermission-navTree1-2").val(obj.role.id);
            },
            error: function () {

            }
        });
    }

    function article_updateTag(param) {
        $.ajax({
            url: '/article/tag/info/' + param,
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (obj) {
                if (obj.code == 200){
                    showCoverForm("updateTag-navTree2-1");
                    $("#name-updateTag-navTree2-1").val(obj.tag.name);
                    $("#tagId-updateTag-navTree2-1").val(obj.tag.id);
                }else{
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "出现错误"
                        });
                    });
                }
            }
        });
    }

    function question_updateTag(param) {
        $.ajax({
            url: '/question/tag2/info/' + param,
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (obj) {

                if (obj.code == 200){
                    showCoverForm("updateTag-navTree3-1");
                    $("#name-updateTag-navTree3-1").val(obj.tag2.name);
                    $("#tagId-updateTag-navTree3-1").val(obj.tag2.id);
                }else{
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.open({
                            type: 0,
                            content: "出现错误"
                        });
                    });
                }
            }
        });
    }
</script>

</html>